<template>
  <div class="wjxiudin-list">
    <div class="content-container">
      <div class="page-header">
        <div class="back-button">
          <el-button
            type="primary"
            icon="el-icon-back"
            @click="$router.push('/main/renshi/kaoqing/wjxiudin/wjxiudin')"
            >返回</el-button
          >
        </div>
        <h1 style="font-size: 20px; padding: 0px">考勤管理办法</h1>
        <h2>文件新增/修订/废止申请单列表</h2>

        <div class="operation-box">
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </div>
      </div>
      <div class="search-box">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="文件名称">
            <el-input
              v-model="searchForm.fileName"
              placeholder="请输入文件名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="文件编号">
            <el-input
              v-model="searchForm.fileNumber"
              placeholder="请输入文件编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="申请部门">
            <el-input
              v-model="searchForm.applyDepartment"
              placeholder="请输入申请部门"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{
          background: '#F5F7FA',
          color: '#303133',
          fontWeight: 'bold',
        }"
      >
        <el-table-column
          prop="applyDate"
          label="申请日期"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="applyDepartment"
          label="申请部门"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="applicant"
          label="申请人"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="fileName"
          label="文件名称"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="fileNumber"
          label="文件编号"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="fileVersion"
          label="版本"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="applyType"
          label="申请类别"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="100"
        ></el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleView(scope.row)"
              >查看</el-button
            >
            <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-box">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getWenjianXiudingPage,
  deleteWenjianXiuding,
} from "@/api/wenjian-xiuding";

export default {
  name: "WjxiudinList",
  data() {
    return {
      searchForm: {
        fileName: "",
        fileNumber: "",
        applyDepartment: "",
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const params = {
          current: this.currentPage,
          size: this.pageSize,
          fileName: this.searchForm.fileName,
          fileNumber: this.searchForm.fileNumber,
          applyDepartment: this.searchForm.applyDepartment,
        };
        const res = await getWenjianXiudingPage(params);
        if (res.data.code === 200) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        }
      } catch (error) {
        console.error("获取列表失败:", error);
      }
    },
    handleSearch() {
      this.currentPage = 1;
      this.fetchData();
    },
    resetSearch() {
      this.searchForm = {
        fileName: "",
        fileNumber: "",
        applyDepartment: "",
      };
      this.handleSearch();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    handleAdd() {
      this.$router.push("/main/renshi/kaoqing/wjxiudin/wjxiudin");
    },
    handleView(row) {
      this.$router.push({
        path: "/main/renshi/kaoqing/wjxiudin/wjxiudin",
        query: { id: row.id, type: "view" },
      });
    },
    handleEdit(row) {
      this.$router.push({
        path: "/main/renshi/kaoqing/wjxiudin/wjxiudin",
        query: { id: row.id, type: "edit" },
      });
    },
    async handleDelete(row) {
      try {
        await this.$confirm("确认删除该记录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });

        const res = await deleteWenjianXiuding(row.id);
        if (res.data.code === 200) {
          this.$message.success("删除成功");
          this.fetchData();
        }
      } catch (error) {
        console.error("删除失败:", error);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.wjxiudin-list {
  min-height: 100vh;
  background-color: #f0f2f5;
  padding: 20px;
  box-sizing: border-box;
}

.content-container {
  width: 280mm;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}
.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  padding: 20px;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  h2 {
    font-size: 20px;
    color: #2c3e50;
    margin: 0;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #409eff, #67c23a);
      border-radius: 3px;
    }
  }
}

.back-button {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.search-box {
  margin-bottom: 20px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 4px;
}

.operation-box {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.pagination-box {
  margin-top: 20px;
  text-align: right;
}
.el-form-item {
  margin-bottom: 0px;
}
.el-table {
  margin-bottom: 20px;
}
</style> 